<template>
    <el-scrollbar style="height: 92vh;">
        <el-container class="cantainer-box">
        <el-header>
            <el-select v-model="paramForm.type" placeholder="请选择" style="width: 150px;margin-right: 10px;">
                <el-option v-for="item in statusWebTypeOption" :key="item.type" :value="item.type" :label="item.msg"></el-option>
            </el-select>
            <el-button type="primary" @click="refreshList">查询</el-button>
        </el-header>
        <el-main>
            
            <el-table :data="tableState.pageData.records">
                <el-table-column fixed="left" label="操作" min-width="70" v-slot="scope">
                    <el-button link type="primary" size="small" @click="updateBankById(scope.row.memberId)">更新题库</el-button>
                    <el-button link type="primary" v-if="scope.row.type != 1" size="small" @click="changeBankById(scope.row.memberId)">变更题库</el-button>
                </el-table-column>
                <el-table-column prop="username" label="用户" min-width="70"></el-table-column>
                <el-table-column prop="questionTypeText" label="题库" min-width="70"></el-table-column>
                <el-table-column prop="examTypeText" label="试卷库" min-width="70"></el-table-column>
                <el-table-column prop="updateTime" label="更新时间" min-width="100"></el-table-column>
                
            </el-table>
            
            
        </el-main>
        <el-footer>
            <div class="demo-pagination-block">
                <el-pagination
                    v-model:current-page="tableState.pageData.pageNum"
                    v-model:page-size="tableState.pageData.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :size="size"
                    :disabled="disabled"
                    :background="background"
                    layout="total,sizes, prev, pager, next"
                    :total="tableState.pageData.recordsTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-footer>
    </el-container>
    </el-scrollbar>
    

</template>

<script setup lang="ts" name="MkMemberTypeBank">


import { ref,reactive, onMounted } from 'vue'
import { changeBankByIdApi, getTypeBankListApi, updateBankByIdApi } from '@/http/api/mk/mkDoQuestion';
import { MkMember, mkMemberTypeBankVo} from '@/bean/mk/MkMember';
import type { ComponentSize,ElButton  } from 'element-plus';
import { ElMessage } from 'element-plus';
import { MyPageData } from '@/bean/base/page';


const statusWebTypeOption = [
    {type:0,msg:"全部"},
    {type:1,msg:"网站1"},
    {type:2,msg:"网站2"},
    {type:3,msg:"网站3"}
];

const paramForm = reactive({
    pageNum: 1,
    pageSize: 10,
    type:0
})



const tableState = reactive(new MyPageData<mkMemberTypeBankVo>);



onMounted(() => {
    refreshList();
})

//获取页面数据
async function refreshList() {
    getTypeBankListApi(paramForm).then((res)=>{
        tableState.pageData = res.data;
    });
}

function updateBankById(memberId:number) {
    let tempParam = { id:memberId};
    updateBankByIdApi(tempParam).then((res)=>{
        if(res.code!=200) return;
        ElMessage({
            message: '操作成功',
            type: 'success',
        })
        refreshList();
    })
}

function changeBankById(memberId:number) {
    let tempParam = { id:memberId};
    changeBankByIdApi(tempParam).then((res)=>{
        if(res.code!=200) return;
        ElMessage({
            message: '操作成功',
            type: 'success',
        })
    })
}






const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    paramForm.pageSize = val;
    refreshList();
}
const handleCurrentChange = (val: number) => {
    paramForm.pageNum = val;
    refreshList();
}

</script>

<style scoped>
.default-table-box {
    width: 100%;
    height: 90%;
}
.default-table-box,.el-container {
  width: 100%;
  height: 100%;
}

.el-footer {
    height: 80px;
}
    
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

</style>